<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Chart } from "@antv/g2";
import { UserOutlined } from "@ant-design/icons-vue";
import moment from "moment";
import { formatDictionaryItem } from "@/utils/common";
import useUserStore from "@/stores/modules/user";
import { getStatisticalChartTableApi } from "@/api/main";
const userStore = useUserStore();
const startOfWeek = moment();
let dateArr: string[] = [];
function daysRecursion(days: number) {
  if (days !== 0) {
    days--;
    let tempobj: any = {
      日期: startOfWeek.clone().add(-days, "days").format("YYYY-MM-DD"),
      访问量: Math.floor(Math.random() * 100000),
    };
    dateArr.push(tempobj);
    daysRecursion(days);
  }
}
daysRecursion(10);

onMounted(async () => {
  const response = await getStatisticalChartTableApi();
  statisticalChartTable.value.classifyCount = response.result.classifyCount;
  statisticalChartTable.value.dictionaryCount = response.result.dictionaryCount;
  statisticalChartTable.value.navigationStationCount =
    response.result.navigationStationCount;
  statisticalChartTable.value.schoolboyCount = response.result.schoolboyCount;
  statisticalChartTable.value.schoolgirlCount = response.result.schoolgirlCount;
  statisticalChartTable.value.unknownGenderCount =
    response.result.unknownGenderCount;
  statisticalChartTable.value.userCount = response.result.userCount;
  const data1 = dateArr;

  const chart1 = new Chart({
    container: "container",
    autoFit: true,
  });

  chart1;
  chart1
    .data(data1)
    .encode("x", "日期")
    .encode("y", "访问量")
    .scale("x", {
      range: [0, 1],
    })
    .scale("y", {
      nice: true,
    })
    .axis("y", { labelFormatter: (d) => d + "-访问量" });

  chart1.line().encode("shape", "smooth");

  chart1.point().encode("shape", "point").tooltip(false);

  chart1.render();

  const data = [
    {
      item: "男",
      count: statisticalChartTable.value.schoolboyCount,
      percent:
        statisticalChartTable.value.schoolboyCount /
        statisticalChartTable.value.userCount,
    },
    {
      item: "女",
      count: statisticalChartTable.value.schoolgirlCount,
      percent:
        statisticalChartTable.value.schoolgirlCount /
        statisticalChartTable.value.userCount,
    },
    {
      item: "未知",
      count: statisticalChartTable.value.unknownGenderCount,
      percent:
        statisticalChartTable.value.unknownGenderCount /
        statisticalChartTable.value.userCount,
    },
  ];

  const chart = new Chart({
    container: "container2",
    autoFit: true,
  });

  chart.coordinate({ type: "theta", outerRadius: 0.8 });

  chart
    .interval()
    .data(data)
    .transform({ type: "stackY" })
    .encode("y", "percent")
    .encode('color', 'name')
  .style('stroke', 'white')
  .style('inset', 1)
  .style('radius', 10)
    .encode("color", "item")
    .legend("color", {
      position: "bottom",
      layout: { justifyContent: "center" },
    })
    .label({
      position: "outside",
      text: (data) => `${data.item}: ${data.percent * 100}%`,
    })
    .tooltip((data) => ({
      name: data.item,
      value: `${data.percent * 100}%`,
    }));

  chart.render();
});

const statisticalChartTable = ref({
  classifyCount: 0,
  dictionaryCount: 0,
  navigationStationCount: 0,
  schoolboyCount: 0,
  schoolgirlCount: 0,
  unknownGenderCount: 0,
  userCount: 0,
});

// const getStatisticalChartTable = () => {
//   getStatisticalChartTableApi().then((response: any) => {
//     statisticalChartTable.value.classifyCount = response.result.classifyCount;
//     statisticalChartTable.value.dictionaryCount =
//       response.result.dictionaryCount;
//     statisticalChartTable.value.navigationStationCount =
//       response.result.navigationStationCount;
//     statisticalChartTable.value.schoolboyCount = response.result.schoolboyCount;
//     statisticalChartTable.value.schoolgirlCount =
//       response.result.schoolgirlCount;
//     statisticalChartTable.value.unknownGenderCount =
//       response.result.unknownGenderCount;
//     statisticalChartTable.value.userCount = response.result.userCount;
//   });
// };
// getStatisticalChartTable()
</script>

<template>
  <div style="width: 100%">
    <a-row>
      <a-col span="6">
        <a-card class="mr-3" >
          <a-statistic
            title="用户总数"
            :value="statisticalChartTable && statisticalChartTable.userCount"
          />
        </a-card>
      </a-col>
      <a-col span="6">
        <a-card class="mr-3" >
          <a-statistic
            title="字典数量"
            :value="
              statisticalChartTable && statisticalChartTable.dictionaryCount
            "
          />
        </a-card>
      </a-col>
      <a-col span="6">
        <a-card class="mr-3" >
          <a-statistic
            title="分类数量"
            :value="
              statisticalChartTable && statisticalChartTable.classifyCount
            "
          />
        </a-card>
      </a-col>
      <a-col span="6">
        <a-card >
          <a-statistic
            title="导航数量"
            :value="
              statisticalChartTable &&
              statisticalChartTable.navigationStationCount
            "
          />
        </a-card>
      </a-col>
    </a-row>
    <a-row class="mt-3">
      <a-col span="6">
        <a-card class="mr-3">
          <div class="flex items-center">
            <a-avatar
              :size="120"
              :src="userStore.userInfo && userStore.userInfo.avatar_url"
            >
              <template #icon><UserOutlined /></template>
            </a-avatar>
            <div class="ml-5">
              <div class="mb-5 font-bold text-2xl">
                {{ userStore.userInfo.nickname }}
              </div>
              <div>
                <a-tag color="#2db7f5">{{
                  formatDictionaryItem(
                    "USER_TYPE",
                    userStore.userInfo.user_type
                  )
                }}</a-tag>
              </div>
            </div>
          </div>
          <a-divider />
          <div class="mt-5 text-gray-400">
            注册时间：
            {{
              moment(userStore.userInfo.createdAt).format("YYYY-MM-DD HH:mm:ss")
            }}
          </div>
          <div class="mt-5 text-gray-400">
            手机号：
            {{ userStore.userInfo.phone_number }}
          </div>
          <div class="mt-5 text-gray-400">
            邮箱：
            {{
              userStore.userInfo.email
                ? userStore.userInfo.email
                : "暂未设置邮箱"
            }}
          </div>
          <div class="mt-5 text-gray-400">
            登录IP：
            {{ userStore.userInfo.ip_address }}
          </div>
          <div class="mt-5 text-gray-400">
            最后登录时间：
            {{ moment(userStore.userInfo.last_login_time).format("YYYY-MM-DD HH:mm:ss") }}
          </div>
          <a-divider />
          <div class="mt-5 text-gray-400">
            个人简介：
            {{ userStore.userInfo.bio? userStore.userInfo.bio:'暂未设置' }}
          </div>
        </a-card>
      </a-col>
      <a-col span="12">
        <a-card class="mr-3">
          <div class="mb-5">近10日访问量</div>
          <div id="container"></div>
        </a-card>
      </a-col>
      <a-col span="6">
        <a-card>
          <div class="mb-5">站点男女比例统计图</div>
          <div id="container2"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped></style>
